@import "./app/shared/styles/variables";
@import "app/shared/styles/ng-zorro-component";

//region HTML elements
html {
  width: 100%;
  height: 100%;
  font-size: @default-font-size;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: @default-font-size;
  color: @default-text-color;
  font-family: @default-font-family !important;
  background: white;
}

input, select, textarea, button {
  font-family: @syht-font-family !important;
}

input {
  box-shadow: none !important;

  &:focus {
    box-shadow: none !important;
  }
}

//endregion

//region Color
.text-white {
  color: white;
}

//endregion
//region Background
.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-yellow {
  background: @yellow-color;
}

//endregion
//region Text
.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

//endregion

//region Font
.font-delivery {
  font-family: @default-code-family;
}

.fs-12 {
  font-size: @font-size-12;
}

.fs-16 {
  font-size: @font-size-16;
}

.fs-18 {
  font-size: @font-size-18;
}

.fs-20 {
  font-size: @font-size-20;
}

.fs-22 {
  font-size: @font-size-22;
}

.fs-24 {
  font-size: @font-size-24;
}

.fs-26 {
  font-size: @font-size-26;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw--bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

//endregion

//region Flex Layout
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-flex-center {
  .d-flex();
  .align-items-center();
  .justify-content-center()
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

//endregion

//region Validation
.error-border {
  border: 1px solid @red-color !important;
}

//endregion

//region Box
.padding-0 {
  padding: 0;
}

.margin-0 {
  margin: 0;
}

.border-0 {
  border: 0;
}

//endregion

//region Bootstrap
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.d-none {
  display: none !important;
}

//endregion
//region Width and Height
.h-100 {
  height: 100%;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

//endregion

//region media
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .container {
    max-width: 1140px;
  }
}


::-webkit-scrollbar-thumb {
  background-color: #e6e6e6;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


/*********************************login page*******************************/
.login-container {
  background-image: url('assets/images/common/bg-login-2021.jpg');
  background-size: cover;

  .input-container {
    position: relative;
    top: 49px;
  }

  input {
    font-size: @font-size-14;
    width: 100%;
    color: white;
    outline: none;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    margin-bottom: 10px !important;
  }
}

/*********************************login page*******************************/


/*********************************菜单样式*******************************/

@shadow-red: 0 0 0 2px rgba(236, 53, 64, 0.08) !important;

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background-color: @black-8c !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 45%) inset;
}

.ant-menu.ant-menu-dark,
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background-color: @black-32;
}


.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected:after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected:after {
  border-bottom-color: @red-11 !important;
}

.ant-tabs-close-x {
  &:hover {
    color: @red-11 !important;

  }

  color: @red-12 !important;
  margin-right: 0px !important;
  position: relative;
  right: -5px;

}

.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background-color: @black-66 !important;
}

.project-menus-tab {
  .ant-menu-light li.ant-menu-item-selected,
  .ant-menu-light .ant-menu-item-selected > a > li
  .ant-menu-light .ant-menu-item-selected > a,
  .ant-menu-light .ant-menu-item-selected > a:hover,
  > li.ant-menu-item-selected,
  > li.ant-menu-submenu-selected,
  .ant-menu-item:hover,
  .ant-menu-item-active,
  .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
  > li.ant-menu-submenu-horizontal.ant-menu-submenu-active,
  div.ant-menu-submenu-title:hover {
    color: @red-11 !important;
    border-bottom-color: @red-11 !important;
  }

  .ant-menu-item .anticon {
    margin-right: 10px;
  }

}

.ant-menu-submenu-popup {
  .ant-menu-item-selected,
  .ant-menu-item:hover {
    color: @red-11 !important;
    background-color: @black-e5 !important;
  }

  .ant-menu-item:hover:after {
    border-bottom-color: @red-11 !important;
  }

}


.ant-menu-dark li.ant-menu-item-selected,
.ant-menu-dark .ant-menu-item-selected > a > li
.ant-menu-dark .ant-menu-item-selected > a,
.ant-menu-dark .ant-menu-item-selected > a:hover,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected,
.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
  color: @yellow-00 !important;
  border-bottom-color: @red-11 !important;
}


.ant-menu-dark .ant-menu-item-selected i,
.ant-menu-dark .ant-menu-item-selected span {
  color: @yellow-00 !important;
}

.ant-select-selection--single {
  //top: -3px;
}

.ant-menu.ant-menu-root li.ant-menu-item > span > a {
  color: rgba(255, 255, 255, 0.65);
}


/*********************************菜单样式*******************************/

/*********************************head样式*******************************/


/*********************************head样式*******************************/

/*********************************按钮样式*******************************/

.ant-btn-primary {
  background-color: @yellow-00;
  border-color: @yellow-00;
  color: @black-32;
  height: 28px;

  &:hover,
  &:focus {
    background-color: @yellow-7f;
    border-color: @yellow-7f;
    color: @red-11;
  }

}

.ant-btn-dangerous {
  background-color: @red-11;
  border-color: @red-11;
  color: @black-ff;

  &:hover,
  &:focus {
    background-color: @black-ff;
    border-color: @red-11;
    color: @red-11;
  }

}

.ant-btn-dashed {
  &:hover,
  &:focus {
    background-color: @black-ff;
    border-color: @red-11;
    color: @red-11;
  }

}


.ant-btn-default {
  background-color: @black-ff;
  border-color: @black-b5;
  color: @black-32;

  &:hover,
  &:focus {
    background-color: @black-ff;
    border-color: @red-11;
    color: @red-11;
  }
}

.ant-btn-gray {
  background-color: @black-b5;
  border-color: @black-b5;
  color: @black-32;

  &:hover,
  &:focus {
    background-color: @black-e8;
    border-color: @black-e8;
    color: @black-32;
  }
}

dhl-confirm-button,
dhl-submit-button,
dhl-drop-down,
dhl-button {
  button {
    margin-right: 10px;
  }
}

.large-button {
  font-size: @font-size-15;
  height: 32px;
  padding: 0px 25px;
}

.default-button {
  font-size: @font-size-13;
  height: 28px;
  padding: 0px 14px;
}

.small-button {
  font-size: @font-size-12;
  height: 23px;
  padding: 0px 10px;
}

.disable-button {
  color: @black-ff !important;
  background-color: @black-b5 !important;
  border-color: @black-b5 !important;

  &:hover,
  &:focus {
    color: @black-ff !important;
    border-color: @black-b5 !important;
    background-color: @black-b5 !important;
  }
}

span.dhl-link-style > div {
  color: @black-32;
  text-decoration: underline;

  &:hover {
    color: @red-11;
    cursor: pointer;
  }

}

.dhl-drop-down-ul {
  > li:hover {
    background-color: @yellow-cc !important;
  }
}


.switch-yellow {
  > button {
    background-color: @black-8c;
  }

  > button.ant-switch-checked {
    background-color: @yellow-7f;
  }
}

.switch-red {
  > button {
    background-color: @black-8c;
  }

  > button.ant-switch-checked {
    background-color: @red-11;
  }
}

.switch-grey {
  > button {
    background-color: @black-8c;
  }

  > button.ant-switch-checked {
    background-color: @black-8c;
  }
}

.switch-green {
  > button {
    background-color: @black-8c;
  }

  > button.ant-switch-checked {
    background-color: @green-39;
  }
}

/*********************************按钮样式*******************************/


/*********************************Table样式*******************************/

.dhl-table {

  .table-top-action {
    text-align: left;
    margin-bottom: 5px;
  }

  nz-table tbody.dhl-table-body {
    > tr:hover > td {
      background-color: @black-f2 !important;
    }

    > tr > td {
      padding: 3px 10px;
      font-size: 13px;
    }
  }

  .ant-table-thead {
    > tr > th {
      padding: 6px;
      background-color: @black-e5;
      color: @black-32;
    }

    .ant-table-row {
      .ant-table-column-sorter-down.on,
      .ant-table-column-sorter-up.on {
        color: @red-12 !important;
      }
    }
  }


  .ant-pagination-item-active a {
    color: @yellow-00
  }

  .ant-pagination-item-active {
    border-color: @yellow-00
  }

  .ant-pagination-options-size-changer,
  .ant-pagination-options-quick-jumper {

    input:focus {
      border-color: @yellow-00 !important;
    }

    &:active,
    &:hover {
      > input,
      > div {
        border-color: @yellow-00 !important;
      }
    }
  }

  .ant-pagination-options-size-changer.ant-select-open .ant-select-selection {
    border-color: @yellow-00 !important;
  }


  .ant-pagination-prev a.ant-pagination-item-link,
  .ant-pagination-next a.ant-pagination-item-link,
  .ant-pagination-item {

    &:hover {
      i,
      a {
        color: @yellow-00
      }

      border-color: @yellow-00
    }

  }

  .dhl-tag-div span {
    letter-spacing: 2px;
  }

}

.ant-select-dropdown-menu-item-selected {
  background-color: @yellow-00 !important;
}

.ant-select-dropdown-menu-item {
  color: @black-32;
}

.ant-spin-dot-item {
  background-color: @yellow-00 !important;
}

.ant-table-column-title {
  i.table-title-edit-icon {
    right: -3px;
    position: relative;
    color: #bfbfbf;
  }
}

/*********************************Table样式*******************************/


/*********************************查询条件样式*******************************/


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes rotateCancel {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.super-query-title-rotate {
  animation: rotate 1s ease both;
}

.super-query-title-rotate-cancel {
  animation: rotateCancel 1s ease both;
}


.superQuery {
  width: 100%;
  margin: 35px 0px;
  display: inline-block;

  .super-query-title-center {
    left: 50%;
    text-align: center;
  }


  .super-query-title {
    position: relative;
    top: -7px;
    background-color: white;
    width: 85px;
    display: inline-block;


    &:hover {
      color: @red-11;
      cursor: pointer;

      > i {
        color: @red-12;
      }
    }
  }

  .super-query-icon {
    top: -7px;
    position: relative;
    font-size: 18px;
    color: #d0d0d0;
  }

  .deliver {
    background-color: #e8e8e8;
    display: block;
    width: 100%;
    height: 2px;
  }
}

/*********************************查询条件样式*******************************/

/*********************************window样式*******************************/

div.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.ant-modal-header {
  background-color: @red-11;
}

div.ant-modal.dhl-window-style {

  div.ant-modal-content {

    box-shadow: none;

    button.ant-modal-close {
      color: white;
    }

    div.ant-modal-footer {
      border-right: solid 1px #D40511;
      border-left: solid 1px #D40511;
      border-bottom: solid 1px #D40511;
      border-top: none;
    }


    div.ant-modal-body {
      border-left: solid 1px #D40511;
      border-right: solid 1px #D40511;
      border-top: none;

      .ant-row {
        min-height: 30px;

        > div:first-of-type {
          text-align: right;
          padding-right: 10px;
        }

        > div {
          top: 7px;
        }
      }
    }

    div.ant-modal-header {
      border-bottom: none;

      div.ant-modal-title {
        color: white;
        border-bottom: none;
      }
    }

  }

}

.ant-modal-header {
  padding: 9px 13px !important;

}


.ant-modal-close-x {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;
  color: white;
}

.ant-modal-title {
  font-size: 14px !important;
  color: white;
}


/*********************************window样式*******************************/
/*********************************drawer样式*******************************/
.ant-drawer-content {
  border-left: solid 1px #D40511;
  border-top: none;

  .ant-drawer-wrapper-body .ant-drawer-header {
    .ant-drawer-title {
      color: white;
    }

    button {
      color: white;
    }

    background-color: @red-11;
  }
}

/*********************************drawer样式*******************************/


/*********************************form表单样式*******************************/

nz-input-number.ant-input-number.ant-input-number-focused {
  border-color: @red-11 !important;
  box-shadow: @shadow-red !important;
}

textarea.ant-input {
  &:hover {
    border-color: @red-11 !important;
  }

  &:focus {
    border-color: @red-11 !important;
    box-shadow: @shadow-red !important;
  }
}


.ant-select-single .ant-select-selector,
span.ant-input,
.ant-input-number,
.ant-picker,
input.ant-input {

  height: 29px;

  &:hover {
    border-color: @red-11 !important;
  }

  &:focus {
    border-color: @red-11 !important;
    box-shadow: @shadow-red !important;
  }
}


.ant-picker-input > input {
  border: none;
  background-color: white;
}

.ant-picker-focused,
.cdk-focused .ant-checkbox-inner,
.ant-checkbox-checked .ant-checkbox-inner,
.ant-select-focused .ant-select-selector {
  border-color: @red-11 !important;
  box-shadow: @shadow-red;
}

.ant-radio-input:focus + .ant-radio-inner,
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:focus .ant-radio,
.ant-radio-checked .ant-radio-inner {
  border-color: @red-11;
}


.ant-radio-input:focus + .ant-radio-inner,
.ant-radio-checked .ant-radio-inner {
  box-shadow: @shadow-red;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-inner::after {
  background-color: @red-11;
}

.ant-radio-checked::after,
.ant-radio-wrapper:hover .ant-radio-inner,
.ant-checkbox-checked::after,
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-calendar-today .ant-calendar-date {
  color: @red-11 !important;
  border-color: @red-11 !important;
}

.ant-radio-checked.ant-radio-disabled .ant-radio-inner,
.ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner {
  background-color: @black-e8 !important;
  color: @black-32 !important;
  border-color: @black-d9 !important;
  box-shadow: none !important;
}

.ant-picker-cell-range-end,
.ant-picker-cell.ant-picker-cell-selected {
  > .ant-picker-cell-inner {
    background-color: @red-12 !important;
    color: @black-ff !important;
  }
}

.ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected,
.ant-select-tree li span.ant-select-tree-node-content-wrapper:hover,
.ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected:hover,
.ant-select-item-option:hover,
.ant-select-item-option-active,
.ant-picker-content .ant-picker-cell-in-range::before,
.ant-calendar-time-picker-select li:hover {
  background-color: @yellow-cc !important;
}


li.ant-calendar-time-picker-select-option-selected {
  &:hover {
    background-color: @yellow-cc !important;
  }

  color: @yellow-00;
  background-color: @yellow-cc;
}


.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date,
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
.ant-calendar-decade-panel-decade:hover,
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,
.ant-calendar-year-panel-year:hover,
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
.ant-calendar-month-panel-month:hover,
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
  color: @red-11 !important;
  border: solid 1px @red-11 !important;
  background-color: @black-ff !important;

}


.ant-calendar-month-panel-year-select:hover,
.ant-calendar-year-panel-decade-select:hover,
.ant-calendar-header {
  color: @yellow-00 !important;

  .ant-calendar-ym-select {
    .ant-calendar-day-select:hover,
    .ant-calendar-month-select:hover,
    .ant-calendar-year-select:hover {
      color: @yellow-00 !important;
    }

  }

}

.ant-calendar-footer-btn {
  time-picker-button a,
  today-button a {
    color: @yellow-00
  }

  ok-button a {
    background-color: @yellow-00 !important;
    border-color: @yellow-00 !important;
    color: @black-32 !important;

    &:hover {
      background-color: @yellow-7f !important;
      border-color: @yellow-7f !important;
      color: @red-11 !important;
    }
  }
}

.ant-calendar-week-number .ant-calendar-body {
  tr.ant-calendar-active-week {
    background-color: @yellow-cc;
  }

  tr:hover {
    background-color: @yellow-cc;
  }
}

nz-form-item {
  margin-bottom: 10px !important;
}

.dhl-date-control {

  nz-range-picker,
  nz-month-picker,
  nz-year-picker,
  nz-week-picker,
  nz-date-picker {
    width: 100%;

    nz-picker > span {
      width: 100% !important;
    }
  }
}

.upload-picture-text {
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  top: 15px;
  position: relative;
  word-wrap: break-word;
  text-align: center;
}

.ant-upload.ant-upload-select-picture-card:hover {
  border-color: @red-11;
}

.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after,
.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  border-color: @red-11;
  background-color: @red-11
}

.ant-tree-checkbox-checked::after,
.ant-tree-checkbox:hover .ant-tree-checkbox-inner {
  border-color: @red-11 !important;
}


.ant-tree {
  li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: @yellow-7f;
  }

  li .ant-tree-node-content-wrapper:hover {
    background-color: @yellow-cc;
  }
}

.form-text-label {
  text-align: right;
  height: 30px;
  line-height: 30px;
  padding-right: 10px;
}

.form-text-value {
  text-align: left;
  height: 30px;
  line-height: 30px;
  padding-right: 10px;
}

.ant-form-item-label {

  line-height: 30px !important;

  > label {
    color: @black-66 !important;
    font-size: 13px;
  }

}

.ant-form-item-control {
  line-height: normal !important;
}

/*********************************form表单样式*******************************/

/*********************************upload表单样式*******************************/
.ant-upload-list-picture-card .ant-upload-list-item-error {
  border-color: @black-d9;
}

.ant-upload-list-picture-card .ant-upload-list-item {
  font-size: 12px;

  .ant-upload-list-item-name {
    color: @black-66;
  }

}

.ant-upload-list-picture-card .anticon-file path {
  &:first-of-type {
    fill: @black-f2;
  }

  &:last-of-type {
    fill: @black-b5;
  }
}

/*********************************upload表单样式*******************************/

/*********************************card组件*******************************/
.gray-background-div {
  padding: 30px;
  background-color: @black-e5;
}

.card-active {
  box-shadow: 3px 7px 11px 3px #e1e1e1;
  border-color: @black-e5;
  position: relative;
  top: -5px;
  cursor: pointer;

  div.card-title {
    color: @green-39 !important;
    font-weight: bolder;
  }

}


.card-plus-div,
.card-div {
  border: 2px solid @black-e5;
  border-radius: 4px;
  float: left;
  margin-right: 20px;
  height: 200px;
  width: 180px;
  display: inline-block;
  background-color: @black-ff;
  margin-bottom: 20px;
}


@keyframes width {
  from {
    width: 140px;
  }
  to {
    width: 180px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1;
  }
}

@keyframes riseUp {
  from {
    transform: translateX(-100px)
  }
  to {
    transform: translateX(0px)
  }

}


@keyframes boxshadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 3px 7px 11px 3px #e1e1e1;
  }
}

@keyframes closeCard {
  from {
    opacity: 1;
    height: 200px;
    width: 180px;
  }
  to {
    opacity: 0;
    width: 10px;
    height: 40px;
  }

}


.card-close-animation {
  animation: closeCard .3s;
}

.card-in-animation {
  animation: riseUp .3s ease forwards, fadeIn .8s ease forwards, width .5s;
}

.card-div {
  > div {
    line-height: 1;
    top: 17%;
    color: @black-b5;
    position: relative;

    div.card-title {
      font-size: 17px;
      line-height: unset;
      margin-bottom: 10px;
      padding: 0px 20px;
      word-wrap: break-word;
    }

    div.card-content {
      font-size: 14px;
      padding: 0px 20px;
      word-wrap: break-word;
    }
  }


  i {
    font-size: 18px;
    top: 4px;
    position: relative;
    color: @black-e5;
    right: 5px;
    float: right;
    opacity: 0;

    &:hover {
      color: @black-b5;
    }
  }

  &:hover {
    animation: boxshadow .1s 0.1s ease both;

    border-color: @black-e5;
    position: relative;
    top: -5px;
    cursor: pointer;

    > i {
      animation: fadeIn .1s 0.1s ease both;
    }

    div.card-title {
      color: @green-39;
      font-weight: bolder;
    }
  }
}

.card-plus-div {
  transition-duration: 0.7s;
  background-color: @black-fa !important;
  border-style: dashed !important;


  i {
    font-size: 64px;
    top: 58px;
    color: #d3d3d3;
    position: relative;
  }


  &:hover {
    border-style: dashed;
    border-color: @red-12;
    cursor: pointer;
  }

}

/*.confirm-element {
  height: 18px;
  width: 20px;
  display: inline-block;
  position: relative;
  right: -98px;
  z-index: -1;
  top: 4px;
}*/


/*********************************card组件*******************************/


/*********************************tab组件*******************************/
.ant-tabs.ant-tabs-card .ant-tabs-nav-list .ant-tabs-tab {
  color: @black-32;
  height: 38px;
  background-color: @yellow-7f
}


.ant-tabs.ant-tabs-card {

  > .ant-tabs-nav {
    margin-bottom: 0px;
  }

  .ant-tabs-nav-list .ant-tabs-tab-active {
    > div.ant-tabs-tab-btn {
      color: @red-11;
    }

    height: 40px;
    background-color: @black-ff;
    border-top: solid 2px @red-11;
    border-right: solid 1px @black-e8;
    border-bottom: solid 1px @black-e8;
    border-left: solid 1px @black-e8;
  }

}

.dhl-tab-set {

  .ant-tabs-bar {
    margin-bottom: 0px;
  }

  .ant-tabs-content {
    padding: 20px;
    border-left: solid 1px @black-e8;
    border-bottom: solid 1px @black-e8;
    border-right: solid 1px @black-e8;
  }
}

/*********************************tab组件*******************************/


/*********************************菜单配置功能*******************************/


/*********************************菜单配置功能*******************************/


/*********************************其他功能*******************************/
.ant-popover-buttons {
  text-align: center;
}

.reduce-input-icon {
  float: right;
  right: -20px;
  position: relative;
  top: -30px;

  &:hover {
    color: @red-11;
    cursor: pointer;
  }
}


/*********************************其他功能*******************************/
/*********************************tranfer功能*******************************/
.dhl-transfer-control {
  .transfer-right,
  .transfer-left {
    padding: 10px;
    border: 1px solid @black-e8;
  }

  .transfer-direction {
    .anticon {
      left: 4px;
      position: relative;
    }

    dhl-button {
      margin: 0px;
    }

    text-align: center;
  }
}

/*********************************tranfer功能*******************************/

/*********************************tag*******************************/
div.dhl-tag-div {
  display: inline-block;
  padding: 5px 15px;
  font-size: 12px;
  color: @black-ff;
  border-radius: 5px;
}

div.dhl-tag-size-small {
  > span {
    position: relative;
    top: 2px;
  }
}

div.dhl-tag-color-grey {
  background-color: @black-8c;
}

div.dhl-tag-color-yellow {
  background-color: @yellow-00;
}

div.dhl-tag-color-green {
  background-color: @green-39;
}

div.dhl-tag-color-red {
  background-color: @red-11;
}

/*********************************tag*******************************/

/*********************************slider*******************************/

div.dhl-slider-grey {
  background-color: @black-8c;
}

div.dhl-slider-yellow {
  background-color: @yellow-00;
}

div.dhl-slider-green {
  background-color: @green-39;
}

div.dhl-slider-red {
  background-color: @red-11;
}

/*********************************slider*******************************/


/*******************************dashboard**********************************/

.active-user-card-area {

  text-align: left;

  .active-user-card-item {
    width: 230px;
    display: inline-block;
    margin: 20px;
    text-align: center;

    .ant-statistic-title {
      color: @black-66;
    }
  }


}

.active-user-card-them {
  text-align: center;
  color: @green-39;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 20px;
}


/*******************************dashboard**********************************/


/*******************************monitor**********************************/
.monitor-html {
  nz-divider > span {
    color: @green-39;
    font-weight: bold;
    font-size: 20px;
  }
}

/*******************************monitor**********************************/


/************************** OTHER********************************************/
.login-user-class > dhl-tag > div {
  margin-right: 20px;
  margin-bottom: 10px;
}

.ant-progress-status-success .ant-progress-text {
  color: @green-22;
}

/************************** OTHER********************************************/


.font-red {
  color: @red-12;
}


.aspect-list {
  div.ant-form-item-control-input-content {
    div.ant-col-5 {
      display: inline-block;
      float: left;
      min-width: 200px;
    }
  }
}
